<template>
  <el-row :gutter="10">
    <h1 class="title">首页</h1>
    <el-col :xs="16" :sm="8" :md="8" :lg="6" :xl="2"
      ><div class="grid-content bg-purple box1">
        {{ userCount }}
        <p>商品总数</p>
      </div></el-col
    >
    <el-col :xs="4" :sm="8" :md="8" :lg="9" :xl="11"
      ><div class="grid-content bg-purple-light box2">
        {{ productCount }}
        <p>订单总数</p>
      </div></el-col
    >
    <el-col :xs="4" :sm="8" :md="8" :lg="9" :xl="11"
      ><div class="grid-content bg-purple box3">
        {{ orderCount }}
        <p>用户总数</p>
      </div></el-col
    >
  </el-row>
</template>

<script>
import { home } from "@/api/index";
import { Row, Col } from "element-ui";
export default {
  data() {
    return {
      userCount: "",
      productCount: "",
      orderCount: "",
    };
  },
  name: "Home",
  components: {
    // HelloWorld
    [Row.name]: Row,
    [Col.name]: Col,
  },
  mounted() {
    home().then((res) => {
      console.log(res);
      this.userCount = res.data.data.userCount;
      this.productCount = res.data.data.productCount;
      this.orderCount = res.data.data.orderCount;
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
@import "@/scss/index.scss";

.title {
  @include FontOnly(40px);
  margin-bottom: 30px;
  color: $fontColor;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.box1 {
  height: 150px;
  line-height: 65px;
  background: orangered;
  color: white;
  overflow: hidden;
  transition: all 0.4s;
}
.box2 {
  height: 150px;
  line-height: 65px;
  color: white;
  background: green;
  transition: all 0.4s;
}
.box3 {
  line-height: 65px;
  color: white;
  height: 150px;
  background: skyblue;
  transition: all 0.4s;
}
.box1:hover {
  transform: scale(1, 1);
  color: black;
  font-size: 18px;
  box-shadow: 10px 10px 10px orangered;
}
.box2:hover {
  transform: scale(1, 1);
  color: black;
  font-size: 18px;
  box-shadow: 10px 10px 10px green;
}
.box3:hover {
  transform: scale(1, 1);
  color: black;
  font-size: 18px;
  box-shadow: 10px 10px 10px skyblue;
}
</style>
